/* flex */
.flex {
    display: flex;

    &-start {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        &-main {
            display: flex;
            justify-content: flex-start;
            align-items: stretch;
        }
        &-cross {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
        }
        &-center {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        &-end {
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
        }
        &-baseline {
            display: flex;
            justify-content: flex-start;
            align-items: baseline;
        }
        &-stretch {
            display: flex;
            justify-content: flex-start;
            align-items: stretch;
        }
    }

    &-center {
        display: flex;
        justify-content: center;
        align-items: center;

        &-main {
            display: flex;
            justify-content: center;
            align-items: stretch;
        }
        &-cross {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        &-start {
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }
        &-end {
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
        &-baseline {
            display: flex;
            justify-content: center;
            align-items: baseline;
        }
        &-stretch {
            display: flex;
            justify-content: center;
            align-items: stretch;
        }
    }

    &-end {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;

        &-main {
            display: flex;
            justify-content: flex-end;
            align-items: stretch;
        }
        &-cross {
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
        }
        &-start {
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
        }
        &-center {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        &-baseline {
            display: flex;
            justify-content: flex-end;
            align-items: baseline;
        }
        &-stretch {
            display: flex;
            justify-content: flex-end;
            align-items: stretch;
        }
    }

    &-between {
        display: flex;
        justify-content: space-between;

        &-start {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        &-center {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        &-end {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        &-baseline {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }
        &-stretch {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
        }
    }

    &-around {
        display: flex;
        justify-content: space-around;

        &-start {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
        }
        &-center {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        &-end {
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
        }
        &-baseline {
            display: flex;
            justify-content: space-around;
            align-items: baseline;
        }
        &-stretch {
            display: flex;
            justify-content: space-around;
            align-items: stretch;
        }
    }

    &-stretch {
        display: flex;
        align-items: stretch;
    }

    &-baseline {
        display: flex;
        align-items: baseline;
    }

    &-column {
        display: flex;
        flex-direction: column;

        &-reverse {
            display: flex;
            flex-direction: column-reverse;
        }

        > .flex-grow {
            width: initial;
            height: 0;
        }
    }
    &-reverse {
        display: flex;
        flex-direction: row-reverse;
    }

    &-wrap {
        display: flex;
        flex-wrap: wrap;
    }
    &-grow {
        flex-grow: 1;
        width: 0;
    }
    &-shrink {
        flex-shrink: 1;
    }
}
/* end flex */

/* function */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis-2,
.ellipsis-3,
.ellipsis-n {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    -webkit-box-orient: vertical;
}
.ellipsis-2 {
    -webkit-line-clamp: 2;
}
.ellipsis-3 {
    -webkit-line-clamp: 3;
}
/* end function */